<template>
  	<el-row >
        <!--  搜索操作区 -->
        <el-row class="pb10 little-header">
            <el-col :md='23' :lg='17'  >
                <div class=' w-100 ' align='left'>
                    <!-- <el-select v-model='search.pro_type' placeholder="请选择" class='w140'>
                          <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                    </el-select>
                    <el-select  v-model='search.contract' placeholder="请选择" class='w140'>
                          <el-option
                            v-for="item in all_type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                    </el-select>
                    <el-select  v-model='search.pro_state' placeholder="请选择" class='w140'>
                          <el-option
                            v-for="item in state"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                    </el-select> -->
                    <el-col  :xs='12'  :sm='8'  :md='8' :lg='8'>
                        <el-input  placeholder='请输入名称或类型' v-model.trim='search.name'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                    </el-col>
                    <el-col  :xs='4'  :sm='4'  :lg='2'>
                        <el-button icon="el-icon-search" type='primary' @click='pageInit()'  class='ml10'>搜索</el-button>
                    </el-col>
                </div>
            </el-col>
            <el-col  :md='23' :lg='{span:5,offset:1}'>  
                <div align="right"   v-if='permit.export'>
                    <el-button  icon="el-icon-upload2"  size="small" round  class='export-icon  '   @click="handleExport()">导出</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- table -->
        <el-table border  :data="tableList"  :cell-class-name='hover'  @cell-click='checkUser'  >
            <el-table-column prop="reqName"    label="名称"    align="center"  fixed></el-table-column>
            <el-table-column prop="reqType"     label="类型"    align="center">
                <template v-slot="list">
                            <span>{{list.row.reqType | Exa_type}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status"    label="状态" align="center">
                <template v-slot="list">
                    <!-- 审批未通过 -->
                    <span  class='color-red'  v-if='list.row.status == 8 '>{{list.row.status | project_exaAll_type}}</span>
                    <!-- 待审批 -->
                    <span  class='color-999'  v-else-if='list.row.status == 0  ||  list.row.status == 1  ||  list.row.status == 3  ||  list.row.status == 5'>{{list.row.status | project_exaAll_type}}</span>
                    <!-- 审批中 -->
                    <span  class='color-999'  v-else-if='list.row.status == 2  ||  list.row.status == 4  ||  list.row.status == 6'>{{list.row.status | project_exaAll_type}}</span>

                    <span  class='color-success'  v-else >{{list.row.status | project_exaAll_type}}</span> <br />
                    <span  v-if='list.row.assigneeName'  class='ft14'>(当前审批指派->{{list.row.assigneeName}})</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime " label="发起时间" align="center">
                <template v-slot="list">
                    <span >{{list.row.createTime | formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="update"  label="完成时间" align="center">
                <template v-slot="list" >
                    <span  v-if = 'list.row.status == 7'>{{list.row.approvedTime | formatDate}}</span>
                    <span  v-else>——</span>
                </template>
            </el-table-column>
            <el-table-column prop="createUserName"   label="发起人"   align="center"></el-table-column>
            <el-table-column label="操作"                    align="center"  width="150"  v-if='permit.approval '>
                <template v-slot="list">
                    <router-link v-if='permit.approval' :to="{path:'/examine/detail',query:{code:list.row.code,type:list.row.reqType}}">
                        <el-button  v-if='(list.row.status == 1 || list.row.status == 3 ||  list.row.status == 5 ) ' type="primary" size="mini" round >审批</el-button>
                        <span  v-else>——</span>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination class='mt28'
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.currentPage"
                :page-sizes="[ 10, 20]"
                :page-size="10"
                :pager-count="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Total">
        </el-pagination>
    </el-row>
</template>

<script >
  /*interface*/
import  { listExamine,del_Exa }  from '@/api/examine/index'
/*state*/
import { mapGetters } from 'vuex'
export default {
  	name: 'examine',
  	data(){
    		return {
            /*static*/
            /*当前用户允许权限*/
            permit:{
                check:false,//查看详情
                approval:false,//审批
                appoint:false,//指派
                export:false,//导出
                check_all:false,
            },
      			types:[
              {value:'',label:'全部分类'},
              {value:'1',label:'待我审批'},
              {value:'2',label:'我发起的'},
              {value:'3',label:'我审批过的'},
              {value:'4',label:'未关闭的'},
            ],
            all_type:[
              {value:'',label:'全部类型'},
              {value:'1',label:'企业入会'},
              {value:'2',label:'项目提审'},
              {value:'3',label:'产品提审'},
              {value:'4',label:'其他'},
            ],
            state:[
              {value:'',label:'全部状态'},
              {value:'1',label:'审批通过'},
              {value:'2',label:'审批未通过'},
              {value:'3',label:'审批中'},
              {value:'4',label:'打回'},
            ],
            /*active*/
      	    search:{
              name:this.Global.ie_nine == true ? '请输入名称或类型':'',/*placeholder 兼容ie9 △*/
              limit: 10,
              currentPage:1,
      	    },
            search_place_str:'请输入名称或类型',//placeholder输入内容 placeholder 兼容ie9 △
            tableList:[],
            Total:null,   
    		      
    		}
  	},
    created(){
        
        this.jurisdiction()//初始化按钮权限操作
        this.pageInit()
    },
    methods:{
        /*初始化 页面 操作权限 S*/
        pageInit(){
            let url
            /*placeholder 兼容ie9 △*/
            if(this.search.name == this.search_place_str){
                this.search.name = ''
            }
            if(this.permit.check_all){
              url='/op/req/get_all_req_list'
            }
            else{
              url='/op/req/get_my_req_list'
            }
            listExamine(url,this.search).then(res=>{
                if(res.data.flag==true){
                    this.tableList = res.data.dataList
                    this.Total = res.data.totalRs
                    /*placeholder 兼容ie9 △*/
                    if(this.search.name == ''){
                        this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
                    }
                }
            })
            .catch(error=>{
                console.log(error)
            })
           
        },
        //初始化按钮权限操作 30100
        jurisdiction(){ 
            this.permit.check = this.button_limit.find(item => {
              return item.id === 30102
            })
            this.permit.approval = this.button_limit.find(item => {
              return item.id === 30104
            })
            this.permit.appoint = this.button_limit.find(item => {
              return item.id === 30105
            })
            this.permit.export = this.button_limit.find(item => {
              return item.id === 30107
            })
            this.permit.check_all = this.button_limit.find(item => {
              return item.id === 30108
            })
        },
        /*初始化 页面 操作权限 E*/

        /*列表操作 S*/
        //导出
        handleExport(){
            this.ExportFile_com(2)
        },

        //删除，暂时不用
        handleDelete(code){
          let that=this;
            this.$confirm('确定删除该条数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              del_Exa(code)
                .then(response => {
                  this.$message({type:'success',message:response.data.msg})
                  this.pageInit()
                })
                .catch(error => {
                  that.outputError(error)
                })
            })
            .catch(() => {})
        },
        /*列表操作 E*/

        /*表格操作 列表样式，分页操作 S*/
        /*placeholder 兼容ie9 focus-blur △*/
        focusinput(e,str){
            if(this.Global.ie_nine == true){
                this.search.name = this.search.name == this.search_place_str ? '':this.search.name
            }
        },
        blurinput(e,str){
            if(this.Global.ie_nine == true){
                let val = e.srcElement.value//ie9下只能用这个值
                this.search.name = val == '' ? this.search_place_str:val
            }
        },
        hover({row, column, rowIndex, columnIndex}){
            //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
            if(columnIndex == 0  ){
                return 'activeCol'
            }
        },
        //点击表格第一列  查看详情
        checkUser(row, column, cell, event){
            if(column.label == '名称'  ){
                this.$router.push({path:'/examine/detail',query:{code:row.code,isCheck:'false',type:row.reqType}})
            }
        },
        /*每页显示条数变化 */
        handleSizeChange(val) {
          this.search.limit = val;
          /*页数改变，scrolltop*/
            document.querySelector('.el-main').scrollTop = 0
          this.pageInit()
        },
        /*页数变化  */
        handleCurrentChange(val) {
          this.search.currentPage = val
          /*页数改变，scrolltop*/
            document.querySelector('.el-main').scrollTop = 0
          this.pageInit()
        },
        /*表格操作 列表样式，分页操作 E*/
    },
    computed:{
      ...mapGetters(['button_limit'])
    },

}
</script>

<style type="text/css" scoped>
	
</style>